import React from 'react'
import { HashRouter, Route, Link } from  'react-router-dom'

// ant design样式
import { Layout, Menu } from 'antd';
const { Header, Content, Footer } = Layout;

// scss样式
import style from './css/app.scss'

// 导入组件
import HomeContainer from "./components/home/HomeContainer.jsx";
import MovieContainer from "./components/movie/MovieContainer.jsx";
import AboutContainer from "./components/about/AboutContainer.jsx";

export default class App extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <HashRouter>
      <Layout className="layout" style={{height:'100%'}}>
        {/*头部*/}
        <Header>
          <div className={style.logo} />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={[window.location.hash.split('/')[1]]}>
            <Menu.Item key="home">
              <Link to="/home">首页</Link>
            </Menu.Item>
            <Menu.Item key="movie">
              <Link to="/movie/in_theaters/1">电影</Link>
            </Menu.Item>
            <Menu.Item key="about">
              <Link to="/about">关于</Link>
            </Menu.Item>
          </Menu>
        </Header>
        
        {/*中间内容*/}
        <Content style={{ backgroundColor:'#fff' }}>
          <Route path="/home" component={HomeContainer}/>
          <Route path="/movie" component={MovieContainer}/>
          <Route path="/about" component={AboutContainer}/>
        </Content>
        
        {/*底部*/}
        <Footer style={{ textAlign: 'center' }}>黑马 ©2020 传智播客</Footer>
      </Layout>
    </HashRouter>
  }
}
